<template>
  <list-container>
    <template slot="form">
      <div class="tags-tabs-style">
        <Tabs
          type="card"
          closable
          @on-click="handleTabClick"
          @on-tab-remove="handleTabRemove"
        >
          <TabPane
            v-for="(item, index) in getTag"
            :key="index"
            :label="item.title"
            :name="item.path"
          ></TabPane>
        </Tabs>
      </div>
    </template>
  </list-container>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters({
      getTag: "tagsView/getTag"
    })
  },
  methods: {
    handleTabClick(name) {
      console.log(name);
    },
    handleTabRemove(name) {
      console.log(name);
    }
  }
};
</script>
<style>
.tags-tabs-style .ivu-tabs-bar {
  border-bottom: none;
  margin-bottom: 0;
}
.tags-tabs-style > .ivu-tabs-card > .ivu-tabs-content {
  display: none;
  transform: none !important;
}

.tags-tabs-style > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.tags-tabs-style > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
  border-color: transparent;
}

.tags-tabs-style > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
  border-color: #fff;
}

.tags-tabs-style
  .ivu-tabs.ivu-tabs-card
  > .ivu-tabs-bar
  .ivu-tabs-tab
  .ivu-icon-ios-close {
  width: 22px;
  transform: translateZ(0);
  margin-right: -6px;
}

.tags-tabs-style .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
  height: 32px;
  background: #fff;
  border-radius: 3px;
  border: none;
  margin-right: 6px;
  color: #808695;
}

.tags-tabs-style .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
  height: 32px;
  background: #fff;
  color: #2d8cf0;
}

/* .ivu-tabs {
  height: 32px;
}
.ivu-tabs-close {
  width: 22px !important;
  transform: translateZ(0) !important;
  margin-right: -6px !important;
}
.ivu-tabs-tab {
  height: 32px !important;
  background: #fff !important;
  border-radius: 3px !important;
  border: none !important;
  margin-right: 6px !important;
 
}
.ivu-tabs-bar {
  border: none !important;
} */
</style>
